<template>
  <div>
    <el-card>
      <el-steps :active="status" process-status="finish">
        <el-step v-for="(item,index) in stepList" :key="index" :title="item.name" :description="item.time?item.time:''" />
      </el-steps>

      <div class="table">
        <div class="title">订单信息：
          <span>
            <el-tag v-if="status === 0" type="danger" size="small" effect="dark">待付款</el-tag>
            <el-tag v-if="status === 1" type="warning" size="small" effect="dark">待发货</el-tag>
            <el-tag v-if="status === 2" size="small" effect="plain">已发货</el-tag>
            <el-tag v-if="status === 3" size="small" effect="dark">已完成</el-tag>
            <el-tag v-if="status === 4" type="info" size="small" effect="dark">已关闭</el-tag>
          </span>
        </div>
        <el-row v-if="detailList[0]" :gutter="40">
          <el-col :span="6"> 订单金额：<span style="color:#f00">{{ orderBase.totalAmount }}</span>  </el-col>
          <el-col :span="6"> 订单编号：<span>{{ orderBase.orderSn }}</span> </el-col>
          <el-col :span="6"> 用户账户：{{ orderBase.memberUsername }} </el-col>
          <el-col :span="6"> 备注：{{ orderBase.note }} </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="6">  下单时间：{{ orderBase.createTime }} </el-col>
          <el-col :span="6">  付款时间：{{ orderBase.paymentTime }} </el-col>
          <el-col :span="6">  发货时间：{{ orderBase.deliveryTime }} </el-col>
          <el-col :span="6">  收货时间： </el-col>
        </el-row>
      </div>
      <div class="table">
        <div class="title">收货人信息</div>
        <el-row :gutter="40">
          <el-col :span="6">  收货人：{{ orderBase.receiverName }} </el-col>
          <el-col :span="6">  用户姓名： <span> {{ orderBase.memberId }}</span></el-col>
          <el-col :span="6">  手机号码：{{ orderBase.receiverPhone }} </el-col>
          <el-col :span="6">  邮政编码：{{ orderBase.receiverPostCode }} </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="6">  城市：{{ orderBase.receiverCity }} </el-col>
          <el-col :span="6">  详细地址：{{ orderBase.receiverDetailAddress }} </el-col>
        </el-row>
      </div>
      <div class="table">
        <div class="title">商品信息</div>
        <el-table
          :data="detailList"
          border
          style="width: 100%"
          fit
        >
          <el-table-column
            prop="productName"
            label="商品名称"
            width="150"
            align="center"
          />
          <el-table-column label="商品图片" width="200" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.productPic" style="width:100px;height:100px" alt="">
            </template>
          </el-table-column>
          <el-table-column label="是否退货" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isReturn == 1" style="color: red; cursor: pointer" @click="goReturn(scope.row)">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="productBrand"
            label="品牌"
            width="200"
            align="center"
          />
          <el-table-column
            prop="productPrice"
            label="价格"
            width="200"
            align="center"
          />
          <el-table-column
            prop="productQuantity"
            label="商品数量"
            width="120"
            align="center"
          />
          <el-table-column
            prop="totalPrice"
            label="小计"
            width="200"
            align="center"
          />
        </el-table>
        <div class="bottom">
          <div class="bottom-title">费用信息</div>
          <el-row v-if="detailList[0]" :gutter="40">
            <el-col :span="6" style="display:flex">运费金额：<div style="color:#f00">0</div></el-col>
            <el-col :span="6" style="display:flex">订单总金额：<div style="color:#f00">{{ orderBase.totalAmount }}</div></el-col>
            <el-col :span="6" style="display:flex">实际金额：<div style="color:#f00">{{ orderBase.payAmount }}</div></el-col>
            <el-col :span="6" style="display:flex">促销优化金额：<div style="color:#f00">{{ orderBase.promotionAmount?orderBase.promotionAmount:0 }}</div></el-col>
          </el-row>
        </div>

        <div v-if="status === 1" class="post">
          <el-form ref="forms" :inline="true" :model="form" class="demo-form-inline" :rules="rules">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="物流公司" size="mini" prop="deliveryCompany">
                  <el-select v-model="form.deliveryCompany" placeholder="物流公司">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="物流单号" size="mini" prop="deliverySn">
                  <el-input v-model="form.deliverySn" placeholder="物流单号" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="status >1" class="address">
          <div class="title">物流信息: <span style="color:gray">{{ orderBase.deliveryCompany }} [{{ orderBase.deliverySn }}]</span></div>
          <el-table
            :data="addresslist"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="Time"
              label="时间"
              width="180"
            />
            <el-table-column
              prop="Station"
              label="状态"
            />
            <el-table-column
              prop="note"
              label="备注"
              width="450"
            />
          </el-table>
        </div>
        <div class="btns">
          <el-button v-if="status === 1" type="primary" size="small" @click="confirm">确认收货</el-button>
          <div v-if="status === 2">
            <el-button v-if="forceshow" type="primary" size="small" @click="force">强制确认收货</el-button>
          </div>

          <el-button v-if="status === 3" type="primary" size="small" @click="close">关闭订单</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { orderDetail, sendDone, finishOrder, receiveProductsForce } from '@/api/order/index'
import fakeAddress from './address.json'
export default {
  data() {
    return {
      id: '',
      stepList: [
        { name: '待付款', time: '' },
        { name: '待发货', time: '' },
        { name: '已发货', time: '' },
        { name: '已完成', time: '' },
        { name: '已关闭', time: '' }
      ],
      options: [
        {
          id: 0,
          name: '顺丰快递'
        },
        {
          id: 1,
          name: '韵达快递'
        },
        {
          id: 2,
          name: '中国邮政'
        },
        {
          id: 3,
          name: '申通快递'
        },
        {
          id: 4,
          name: '中通快递'
        }
      ],
      rules: {
        deliveryCompany: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ],
        deliverySn: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ]
      },
      status: 0,
      detailList: [],
      orderBase: [],
      form: {
        deliverySn: '',
        deliveryCompany: ''
      },
      forceshow: true
    }
  },
  computed: {
    addresslist() {
      return fakeAddress.address
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getDetail(this.id)
  },
  methods: {
    // 跳转退单列表
    goReturn(val) {
      this.$router.push({ name: 'BackDetail', params: { id: val.returnId }})
    },
    confirm() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          sendDone({
            orderId: this.id,
            deliverySn: this.form.deliverySn,
            deliveryCompany: this.form.deliveryCompany
          }).then(res => {
            if (res.success) {
              window.location.reload()
            } else {
              this.$message.error('确认订单失败')
            }
          })
        } else {
          this.$message.error('请填写必要信息')
          return false
        }
      })
    },
    close() {
      finishOrder(this.id).then(res => {
        if (res.success) {
          this.$message.success('已关闭订单')
          window.location.reload()
        } else {
          this.$message.error('关闭订单失败')
        }
      })
    },
    force() {
      receiveProductsForce(this.id).then(res => {
        if (res.success) {
          this.$message.success('强制确认收货成功')
          window.location.reload()
        }
      })
    },
    forceButton() {
      this.detailList.forEach(item => {
        if (item.isReturn === 0) {
          this.forceshow = false
        }
      })
    },
    getDetail(data) {
      orderDetail(data).then(res => {
        console.log(res)
        this.status = res.data.orderDetail.orderBase.status
        this.detailList = res.data.orderDetail.orderItems
        this.orderBase = res.data.orderDetail.orderBase
        this.initsteplist()
        this.forceButton()
      })
    },
    // 进度条时间
    initsteplist() {
      this.stepList[0].time = this.orderBase.createTime
      this.stepList[1].time = this.orderBase.paymentTime
      this.stepList[2].time = this.orderBase.deliveryTime
      this.stepList[3].time = this.orderBase.receiveTime
      this.stepList[4].time = this.orderBase.finishTime
    }
  }
}
</script>
<style lang="scss" scoped>
 ::v-deep .el-card__body{
    padding: 0px 0px 20px 20px;
 }
  .el-card{
    margin: 30px;
    .el-steps{
      padding:30px;
      border-bottom: 1px solid #dcdfe6;
    }
    .table{
      margin-top: 30px;
      border-bottom: 1px solid #dcdfe6;
      .title{
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 30px;
      }
      .el-col{
        margin-bottom: 15px;
        padding-bottom: 10px;
        padding-left: none !important;
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
      }
      .bottom{
       margin-top: 40px;
       padding-bottom: 20px;
        .bottom-title{
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 30px;
        }
      }
      .btns{
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 20px 0;
      }
    }
  }
</style>
